// 1、vuex模块的加载
import { createStore } from "vuex"
import dataApi from "@/api/dataApi.js";

// 2、vuex的仓库构建 = createStore 为选项式API
const store = createStore({
    // 被共享的数据定义仓库
    state:{
        msg:"vuex-msg",
        num:100,
        arr:[],
        user:{
            name:"tom",
            age:23
        }
    },
    // 提供专用的 state 变量修改方法，构成环装单向数据传递结构
    // 同时完成 调试工具的日志记录
    // mutations 最终将作为vuex的共享事件在仓库对象中被定义，如果需要触发该事件，使用仓库对象提供的 commit 触发函数执行
    mutations:{
        // key 为自定义方法名 (实际开发中多以 set+被选修改变量名 的方式组成)
        // value 值为 固定函数 function( state,nv ){}
        //          state 当前vuex的变量定义的仓库对象 state
        //          nv 修改的新数据
        setMsg:function(state,nv){
            state.msg = nv;
        },
        setNum:function(state,nv){
            state.num = nv;
        },
        setArr(state,nv){
            state.arr = nv;
        }
    },
    // 为仓库变提供统一的 异步数据加载方案
    // actions 最终会作为vuex的异步请求共享事件在仓库对象中被定义，如果需要触发该事件，使用仓库对象提供的 dispatch 触发函数执行
    actions:{
        // key 为自定义方法名
        // value 为固定函数 function(store,params){}
        //      store 为 createStore创建的vuex仓库对象，和组件中的 $store 是一样的
        //      params 是额外参数
        initArr:async function(store,params){
            console.log(params)
            // 模拟ajax请求
            // setTimeout(() => {
            //     // store.state.arr = [1,2,3,4] // 可以完成赋值操作 -> 没有变量修改日志
            //     store.commit("setArr",[1,2,3,4])
            // }, 2000);
            let nv = await dataApi.loadUserList();
            store.commit("setArr",nv)
        }
    }
});

// 3、导出共享仓库对象
export default store;

// 4、main.js 完成 use(store) 的安装和执行